import { Meta } from '@storybook/addon-docs'; import image01 from './assets/panel_de_contenido/1.png'; import image02 from './assets/panel_de_contenido/2.png'; import image03 from './assets/panel_de_contenido/3.png'; import image04 from './assets/panel_de_contenido/4.png'; import image05 from './assets/panel_de_contenido/5.png'; # Panel de contenido / Content panel El panel de contenido es un patrón básico y flexible de alto nivel, que contempla múltiples variaciones. Es el patrón más utilizado, ya que permite la generación consistente de páginas a lo largo de una solución digital. Este patrón no propone una distribución de contenidos fija, ni una definición rígida, sino que establece una serie de posibilidades y normas para la generación dinámica de cualquier página. Es un patrón abierto a la incorporación de nuevos elementos en cualquier momento. El panel de contenido guía la distribución del contenido dentro de la página, siempre supeditado a las necesidades de la definición funcional del mismo. A continuación y para el más sencillo entendimiento del panel de contenido presentamos un **ejemplo de una página de contenido** de la Sede, con un trámite tipo. Este ejemplo, no real, pero posible, se ha creado para ilustrar el comportamiento de este patrón.
Esta misma página puede presentarse (aunque es una opción no recomendada) con todo el contenido visto. Usaremos esta versión más completa con fines ilustrativos para detallar mejor la organización de los elementos de una página compleja
## Elementos del contenido Un contenido se compone de múltiples elementos. En la narrativa, un contenido se divide en distintas piezas menores, que combinan distintos formatos, que lo hacen más asimilable. Así pues, una reducción de un contenido elemental a las piezas más típicas, podría contemplar encabezado de contenidos o título (heading), contenedores, textos descriptivos (copys), elementos complementarios como imágenes o video, llamada de acción o CTA (call-to-action) y área lateral.
El **encabezado** es un texto corto que indica el tema de la página en concreto. Según la definición de estilos típicamente usa tipografía expresiva. Este elemento es único para cada página, aunque los distintos **bloques de contenido** pueden tener sus encabezados propios. Los bloques de contenido agrupan distintos elementos de contenido, típicamente posicionando unos a continuación de otros Es también posible la creación de subbloques dentro de los bloques, cada uno con su encabezado. No todos los bloques ni subbloques deben tener obligatoriamente encabezados, aunque sí es recomendable. Tampoco es recomendable la complejidad en la estructuración de bloques y subbloques, ni la creación de jerarquías de mucha profundidad, dado que confunden al usuario. Es preferible utilizar otros recursos para la estructuración de páginas como emplear pestañas de contenido, navegar a otras páginas para profundizar en contenidos… En cualquier caso, los encabezados de los bloques y subbloques, indican el tema de estos, y jerárquicamente están por debajo del encabezado de página, con lo que se deben presentar con una tipografía inferior. Típicamente las tipografías utilizadas son productivas de mayor tamaño que los textos que suelen ser Lato 16px. Esto es de manera incremental se recomienda el uso de tipografías como lato 18px, 20px, 24px o 32px a medida que con un mayor tamaño se refleja una posición superior en la jerarquía de títulos. Estos bloques de contenido, pueden posicionarse directamente en la página o distribuidos dentro de **contenedores**, que permiten estructurar de una manera más visual los mismos. Es posible distribuir contenedores dentro de otros contenedores, aunque es una práctica poco recomendable y de la que no conviene abusar, por la complejidad que añaden para el usuario.. Los contenedores se visualizan como áreas de contenido delimitadas con colores de fondo diferentes a los del elemento que los contiene, o con un borde específico. Los diferentes colores y los bordes han de ser consistentes a lo largo de la solución, y estar de acuerdo con los definidos en el tema específico. Los **textos descriptivos** puede tener varias funciones, desde un texto introductorio que describa en líneas generales el contenido de la página, a varios bloques de texto que detallen el contenido, o textos auxiliares que amplian dicho contenido. Estos textos típicamente adoptan la tipografía base productiva, esto es Lato de 16px, aunque se pueden presentar ciertas varianzas como textos de mayor tamaño para encabezar los distintos bloques de contenido, textos de menor tamaño para presentar textos de jerarquías inferiores, o cualificadores como las cursivas o negrita para destacar ciertas palabras. Otros **elementos de soporte** como imágenes, vídeos, documentos… o incluso elementos de mayor entidad como tarjetas, tablas… que pueden ser utilizados para enriquecer el contenido. Estos elementos se pueden disponer en bloques propios, o intercalados en el interior de los bloques anteriores. Las **llamadas a la acción** y **navegadores** permiten la interacción con el usuario mediante elementos como enlaces o botones, típicamente situados al pie de la página y en la parte derecha de la misma. Permiten la ejecución de acciones sobre el contenido o la navegación hacia otros contenidos relacionados. Conviene mostrar claramente al usuario la diferente importancia de estas llamadas a la acción y navegaciones. Para esto, se posicionan las acciones de mayor prioridad en el extremo derecho y continúan de manera decreciente hacia la izquierda. Asimismo, se ha de usar la prioridad definida para los componentes para indicar esta importancia (botones primarios, secundarios, terciarios…). Es posible incluir elementos de acción y navegación dentro del contenido. Para ello se recomienda más el uso de enlaces que de botones, relegando estos, o por lo menos sus variaciones más importantes para acciones globales al pie de la página. Es recomendable tener cuidado con la introducción de múltiples acciones y navegadores a lo largo del contenido puesto que confunden al usuario y pueden llevarle a ignorar zonas del contenido que podrían ser de interés. Los bloques definidos típicamente se distribuyen de manera vertical, aunque es posible la introducción de **elementos laterales**. Estos elementos se suelen incluir en contenedores específicos puesto que rompen el ritmo vertical, indicando claramente que es información adicional del contenido principal. ## Página de contenido Aunque por simplicidad se recomienda que cada página presente un único contenido, es bastante habitual incluir varios contenidos en una misma página, en el caso que estos estén íntimamente relacionados y se quieran presentar conjuntamente. También es bastante habitual incluir en una página de contenido un único contenido complejos que se componen de contenidos simples y elementos fijos. En el caso de la Sede, el contenido más importante, el trámite es un contenido complejo compuesto de información general, informaciones detalladas, accesos… Es estos casos, los contenidos o piedas de contenidos, se presentan en **secciones** individuales. Estas secciones deben tener formatos similares y adaptados a cada contenido concreto. Las secciones deben estar claramente diferenciadas, bien mediante amplio espacio, separadores o mediante contenedores individuales, similares a los que se utilizan para estructurar los distintos bloques de un contenido. Las secciones permiten estructurar la información en **bloques** que permiten organizar información compleja. Cada bloque funciona como un microcontenido en sí mismo con elementos como encabezado, cuerpo, imágenes… El **espaciado** es clave a la hora de transmitir al usuario claramente la manera en la que se estructura la información. Ayuda a entender mejor la distribución y facilita la manera en que interactúa con la solución. Se recomienda seguir las reglas generales de espaciado, aunque cada solución concreta requerira unos espaciados diferentes. Usaremos macroespaciados para los elementos constitutivos de la estructura general de la página, por ejemplo de 48px, para separar los grandes grupos de información como la cabecera de la solución (de la estructura del interfaz) y la cabecera de la propia página, así como las separaciones entre secciones, o 32px entre las distintas secciones.
Las **agrupaciones** de contenidos permiten mostrar simultáneamente un conjunto de varios contenidos de manera rápida y permitiendo al usuario acceder expresamente al detalle de uno o varios de ellos. Pueden servir como elementos de portada para grupos de páginas de contenidos (landings), listas e índices de contenidos… Estas agrupaciones tienen mayor jerarquía que los contenidos en si mismos y por tanto una mayor categoría visual. Estas agrupaciones pueden ser una página en si misma o formar parte de una sección dentro de una página con múltiples secciones de elementos. En cualquier caso, es importante remarcar que, en las agrupaciones, no se muestran los contenidos completos, sino un resumen, una previsualización, únicamente con la información suficiente para que el usuario comprenda la diferencia entre los distintos contenidos agrupados y pueda elegir cual ver con mayor detenimiento. Los componentes agrupados pueden mostrarse de distintas maneras, como una lista de contenidos, usando componentes como la lista estructurada o la tabla para presentar distintos datos de cada contenido de una manera ordenada, como un conjunto de tarjetas, con un formato común de tarjeta para todos los contenidos. No hay limitación en cuanto al número de elementos que se muestran en cada agrupación, se recomienda que se estudie en cada caso el contexto de la página, la cantidad de elementos óptimos… Para números pequeños de contenidos es conveniente mostrar todos a la vez, para números mayores de contenidos se puede usar elementos adicionales como el paginador que permite ir navegando dentro de esta agrupación. ## Anatomía del panel de contenido A continuación se muestra un ejercicio de anatomía sobre la página de contenido ejemplo donde queda reflejada la estructura de visualización de los contenidos, así como las jerearquías tipográficas definidas. Esta anatomía representa una declaración de intenciones para una solución concreta, y plantea unos principios de construcción que deben mantenerse consistentes a lo largo de toda la solución digital.
Es importante destacar la regularidad de espaciados entre los distintos elementos que constituyen las páginas: - Macroespaciado grande (48px) para la separación entre secciones - Macroespaciado regulkar (32px) para la separación entre bloques - Espaciado regular (16px) para la separación de párrafos en tipografías normales - Espaciado reducido (8px) para separación de párrafos en tipografías menores De la misma manera, las distintas tipografías empleadas muestran la jerarquía de la información: - Heading 05 (Lato 32px) para el título de la página - Heading 03 (lato 20px) para el encabezado de las secciones - Heading 02 (Lato 18px negrita) para el encabezado de los bloques - Heading 01 (Lato 16px negrita) para el encabezado de los párrafos - Body long 02 (Lato 18px / Interlineado 28px) para párrafos de texto destacado, entradilla de página… - Body long 01 (Lato 16px / Interlineado 24px) para párrafos de texto estandar - Body short 01 (Lato 16px / Interlineado 22px) para párrafos de texto menores, aclaraciones… - Caption 01 (Lato 12px) para elementos de soporte, etiquetas, ayudas… Cada solución definirá sus propias reglas de espaciado y tipografías y se encargara de mantenerlas constantes a lo largo de toda la solución para garantizar una homogeneidad de las páginas que la constituyen. Estoa espacios y tipos se modelarán en losm distintos temas mediante tokens.